<template>
  <div class="home">
    <h2>App当前计数:{{ $store.state.counter }}</h2>
    <!-- <h2>name:{{ name }}</h2>
    <h2>age:{{ age }}</h2>
    <h2>height:{{ height }}</h2> -->
    <!-- //对象写法 -->
    <!-- <h2>name:{{ sName }}</h2>
    <h2>age:{{ sage }}</h2>
    <h2>height:{{ sHeight }}</h2> -->
    <h2>name:{{ cName }}</h2>
    <h2>age:{{ cage }}</h2>
    <h2>height:{{ cHeight }}</h2>
  </div>
</template>

<!-- <script>
import { mapState } from 'vuex'
export default {
  computed: {
    //数组写法
    // ...mapState(['name', 'age', 'height']),
    //对象写法
    ...mapState({
      sName: (state) => state.name,
      sage: (state) => state.age,
      sHeight: (state) => state.height,
    }),
  },
}
</script> -->
<script setup>
import { useStore, mapState } from 'vuex'
import { computed } from 'vue'
const stroe = useStore()
const { name, age, height } = mapState(['name', 'age', 'height'])
const cName = computed(name.bind({ $store: stroe }))
const cage = computed(age.bind({ $store: stroe }))
const cHeight = computed(height.bind({ $store: stroe }))
</script>

<style scoped></style>
